<template>
    <div class="content">
        <Draggable v-model="list" group="people" @start="drag = true" @end="drag = false" item-key="id">
            <template #item="{element, index}">
                <div class="flex-jsb">
                    <div class="list-item" v-if="!!handleVal(element.type)">
                        <div class="flex">
                            <a-badge
                                :count="index + 1"
                                :number-style="{
                                    backgroundColor: '#fff',
                                    color: '#999',
                                    boxShadow: '0 0 0 1px #d9d9d9 inset',
                                }"
                            />
                            <div class="component">
                                <component :is="h(MAP_CONFIG[element.type].preview)" :value="handleVal(element.type)" />
                            </div>
                        </div>
                    </div>

                    <div class="setting">
                        <EditOutlined class="icon" @click="handleEdit" />
                        <DeleteOutlined class="ml12 icon" @click="handleDelete(element)" />
                    </div>
                </div>
            </template>
        </Draggable>
        <div class="flex btns">
            <div class="ml12" v-for="item in keys">
                <component :is="h(MAP_CONFIG[item].button)" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import _ from "lodash";
import {h} from "vue";
import {reactive, ref, toRaw} from "vue";
import {EditOutlined, DeleteOutlined} from "@ant-design/icons-vue";
import Draggable from "vuedraggable";

import {MAP_CONFIG} from "./index.ts";
const keys = _.keys(MAP_CONFIG);
const drag = ref(false);

const list = reactive([
    {
        id: 0,
        type: "text",
        value: [
            {insert: "撒上看见的都看见啊是个大就噶时光回家啊帅哥的话🥺\n\n\n"},
            {
                attributes: {
                    alt: "[爱心]",
                    src: "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif",
                    width: "24px",
                    height: "24px",
                },
                insert: {
                    emoji: {
                        alt: "[爱心]",
                        src: "https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/66.gif",
                        width: "24px",
                        height: "24px",
                    },
                },
            },
        ],
    },
    {id: 1, type: "image", value: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},
    // {id: 1, type: "image", value: ""},
    {id: 2, type: "file", value: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"},
]);

const handleVal = type => {
    const data = toRaw(list);
    const item = _.find(data, {type});
    return item.value;
};

// 删除当前数据
const handleDelete = item => {};
// 编辑当前数据
const handleEdit = item => {};
</script>

<style scoped lang="less">
.content {
    padding: 4px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;

    .flex-jsb {
        .list-item {
            width: 100%;
            background-color: #fff;
            .flex {
                display: flex;
                align-items: center;
                padding: 8px 12px 8px 24px;
            }
            .component {
                margin-left: 12px;
                border-radius: 4px;
                overflow: hidden;
            }
        }
        .setting {
            width: max-content;
            height: max-content;
            background-color: #fff;
            display: flex;
            align-items: center;
            .icon {
                font-size: 20px;
            }
        }
    }
    .btns {
        display: flex;
        padding: 8px 16px;
        line-height: 31px;
        display: flex;
        background: #f7f7f7;
        border: 1px solid #e9e9e9;
    }
}
</style>
